<template>
  <div class="header">
    <el-tooltip class="item"
                effect="light"
                content="点击刷新页面"
                placement="top">
      <div class="v-title"
           @click="reload()">信息展示平台
      </div>
    </el-tooltip>
    <div class="btn-fullscreen"
         @click="buttoncli">
      <el-tooltip effect="light"
                  :content="isFullscreen ? `取消全屏` : `全屏`"
                  placement="bottom-end">
        <i class="iconfont"
           :class="isFullscreen ? 'icon-quxiaoquanping2' : 'icon-quanping2'"></i>
      </el-tooltip>
    </div>
    <div class="set-color"
         @click="onSet">
      <el-tooltip class="item"
                  effect="light"
                  content="设置主题风格"
                  placement="top">
        <i class="el-icon-edit"></i>
      </el-tooltip>
    </div>
    <!-- 选择主题风格弹窗 -->
    <el-dialog title="选择主题风格"
               :visible.sync="dialogVisible">
      <el-radio v-model="radio1"
                label="1"
                border>
        <img src="../../assets/style/standard.png"
             style="width: 150px"
             alt="标准">
      </el-radio>
      <el-radio v-model="radio1"
                label="2"
                border>
        <img src="../../assets/style/standard.png"
             style="width: 150px"
             alt="明亮">
      </el-radio>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="onSetAffirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import screenfull from 'screenfull'
import { mapState, mapMutations } from 'vuex'

// screenfull.js为全屏依赖
export default {
  name: 'tab1',
  components: {
  },
  props: {
    showLoginout: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  computed: {
    ...mapState(['theme']),
  },
  data() {
    return {
      isFullscreen: false,
      dialogVisible: false,
      radio1: '1',

    }
  },
  created() {
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.destroy()
  },
  methods: {
    buttoncli() {
      if (!screenfull.isEnabled) {
        // 如果不允许进入全屏，发出不允许提示
        this.$message({
          message: '不支持全屏',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    },
    // 设置主题风色
    onSet() {
      this.dialogVisible = true
    },
    // 主题风格设置确认
    ...mapMutations(['changeTheme']),
    onSetAffirm() {
      this.dialogVisible = false
      var theme
      if (this.radio1 === '1') {
        theme = 'standard'
      }
      if (this.radio1 === '2') {
        theme = 'light'
      }
      this.changeTheme(theme)
      sessionStorage.setItem('set-theme', theme) // 将setID存储到浏览器中
      // window.location.reload()
    },
    change() {
      this.isFullscreen = screenfull.isFullscreen
    },
    init() {
      if (screenfull.isEnabled) {
        // screenfull.request() // 并不支持默认全屏显示
        screenfull.on('change', this.change)
      }
    },
    destroy() {
      if (screenfull.enabled) {
        screenfull.off('change', this.change)
      }
    },
    reload() {
      window.location.reload()
    }
  }
}
</script>

<style lang="less" scoped>
@import '//at.alicdn.com/t/font_2146611_q77iffjprho.css';
.header {
  height: 9vh;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background: url('../../assets/back-image/header_bg.jpg') no-repeat center;
  background-size: 100% 100%;
  .btn-fullscreen {
    display: inline-block;
    position: fixed;
    top: -30px;
    right: 80px;
    //   margin: 0 15px;
    .iconfont {
      cursor: pointer;
      color: #82dbff;
      &:hover {
        color: #6396fd;
      }
    }
  }
  .set-color {
    display: inline-block;
    position: fixed;
    top: -30px;
    right: 30px;
    .el-icon-edit {
      cursor: pointer;
      color: #82dbff;
      font-size: 22px;
      &:hover {
        color: #6396fd;
      }
    }
  }
  /deep/ .el-dialog__body {
    display: flex;
    flex-direction: row;
    .el-radio {
      height: 100%;
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
    }
  }
  .v-title {
    padding: 0 0.6rem;
    font-size: 0.4rem;
    color: #82dbff;
    letter-spacing: 0.1rem;
    font-weight: 700;
    line-height: 0.8rem;
    cursor: pointer;
  }
}
</style>
